<template>
  <el-container class="layout-container-demo" style="height: 100vh">
    <el-aside :width="app.isCollapse?'60px':'180px'" style="background:rgb(41,66,86) " >
      <el-scrollbar>
        <MyMenu :menuList="menuList" />
      </el-scrollbar>
    </el-aside>

    <el-container>
      <el-header style="text-align: right; font-size: 12px; background-color: rgb(41,66,86); color: white;">
        <div class="toolbar">
          <div style="height: 100%; display: inline-flex; justify-content: center; align-items: center; position: absolute; left: 20px;">
            <el-icon size="large" @click="app.isCollapse=true" v-if="!app.isCollapse"><CaretLeft /></el-icon>
            <el-icon size="large" @click="app.isCollapse=false" v-if="app.isCollapse"><CaretRight /></el-icon>
            <el-breadcrumb separator=">" style="margin-left: 10px;">
              <el-breadcrumb-item v-for="(route, index) in matchedRoutes" :key="index" :to="route.path">
                <span style="color:white; cursor: pointer; user-select: none;">{{ route.meta.title }}</span>
              </el-breadcrumb-item>
            </el-breadcrumb>
          </div>
          <el-dropdown style="height: 100%; display: inline-flex; justify-content: center; align-items: center; position: absolute; right: 20px;">
            <el-avatar
                src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
                size="small"
                shape="square"
            />
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item v-if="app.userInfo">
                  <div style="text-align: center; width: 100%;">{{app.userInfo.username}}</div>
                </el-dropdown-item>
              </el-dropdown-menu>
              <el-dropdown-menu>
                <el-dropdown-item @click="logout">退出登录</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </div>
      </el-header>

      <el-main style="display: flex;">
        <el-scrollbar style="padding: 0 20px;   flex: 1; " >
          <router-view/>
        </el-scrollbar>
      </el-main>
    </el-container>
  </el-container>
</template>


<script setup lang="ts">
import MyMenu from "../../components/MyMenu.vue";
import {useRoute, useRouter} from "vue-router";
import appStore from "@/store/appStore.ts";
import {computed} from "vue";
import {Back, CaretLeft, CaretRight} from "@element-plus/icons-vue";

const route = useRoute()
const router = useRouter()


const app = appStore()

const menuList = ref([])
menuList.value = JSON.parse(JSON.stringify(app.menuList))

menuList.value.forEach(item=>{
  item.children.forEach(i=>{i.children=[]})
})

const logout = () =>{
  app.token=""
  app.userInfo={}
  router.push('/login')
}

const matchedRoutes = computed(() => {
  return route.matched.filter(route => route.meta && route.meta.title);
});

</script>

<style scoped>
.layout-container-demo .el-header {
  position: relative;
  background-color: var(--el-color-primary-light-7);
  color: white;
}
.layout-container-demo .el-aside {
  color: white;
  background: var(--el-color-primary-light-8);
}
.layout-container-demo .el-menu {
  border-right: none;
}
.layout-container-demo .el-main {
  padding: 0;
}
.layout-container-demo .toolbar {
  height: 100%;
  width: 100%;
}
</style>
